<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/js/notice.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <link th:href="@{/css/notice.css}" rel="stylesheet" />
</head>
<body>
<div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>订单信息</legend>
        <form class="layui-form layui-form-pane" style="margin: 20px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">订单名称</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="keyName" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </fieldset>
    <div>
        <table id="orderTable" lay-filter="orderTable"></table>
    </div>
</div>
<!---->
<script id="tool" type="text/html">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="look">详情</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="get">收款</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="go">发货</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="back">退款</a>
</script>
<!---->
<!--<script id="tableBar" type="text/html">-->
<!--    <a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">-->
<!--        <i class="layui-icon layui-icon-add-1"></i>-->
<!--        新增-->
<!--    </a>-->

<!--</script>-->
<!---->


<script>
    var $,active;
    layui.use(['notice','table','form','laydate','layer','dropdown','jquery'],function(){

        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            notice = layui.notice,
            dropdown = layui.dropdown;
        $ = layui.jquery;

        laydate.render({
            elem:'#endDate'
        })
        laydate.render({
            elem:'#endDate'
        })

        // 初始化配置，同一样式只需要配置一次，非必须初始化，有默认配置
        notice.options = {
            closeButton:true,//显示关闭按钮
            debug:false,//启用debug
            positionClass:"toast-top-right",//弹出的位置,
            showDuration:"3000",//显示的时间
            hideDuration:"1000",//消失的时间
            timeOut:"5000",//停留的时间
            extendedTimeOut:"1000",//控制时间
            showEasing:"swing",//显示时的动画缓冲方式
            hideEasing:"linear",//消失时的动画缓冲方式
            iconClass: 'toast-info', // 自定义图标，有内置，如不需要则传空 支持layui内置图标/自定义iconfont类名
            onclick: null, // 点击关闭回调
        };


        // notice.warning("成功");//黄色
        // notice.info("提示信息：毛都没有...");//蓝色
        // notice.error("大佬，我咋知道怎么肥四！");//红色
        // notice.success("大佬，我咋知道怎么肥四！");//绿色

        //加载动态表格
        table.render({

            elem:'#orderTable',
            height:'full-160',
            page:true,
            toolbar:'#tableBar',
            url:'/order/oc/find',
            cols:[
                [
                    {type:'numbers',fixed:'left'},
                    {type:'checkbox',fixed:'left'},
                    {field:'id',title:'ID',width:100,align: 'center'},
                    {field: 'gid',title:'商品ID',width:100,align: 'center'},
                    {field:'orderSn',title:'订单编号',width:100,align: 'center'},
                    {field:'userUrl',title:'用户头像',width:80,align: 'center'},
                    {field:'mid',title:'用户ID',width:100,align: 'center'},
                    {field:'createTime',title:'下单时间',width:100,align: 'center'},
                    {field:'orderStatus',title:'订单状态',width:100,align: 'center',
                        templet:function(obj){
                        //0 已完成订单，1待支付订单，2支付异常订单，3代发货订单，4待收货订单，5退换货订单，6退款订单
                            var orderStatus = obj.orderStatus;
                            var str = "";
                            if(orderStatus == 1){
                                str = "<span style='color:#00FF00'>待支付订单</span>"
                            }else if (orderStatus == 2){
                                str = "<span style='color:#BD362F'>支付异常订单</span>"
                            }else if (orderStatus == 3){
                                str = "<span style='color:#0000FF'>代发货订单</span>"
                            }else if (orderStatus == 4){
                                str = "<span style='color:#ffa8a8'>待收货订单</span>"
                            }else if (orderStatus == 5){
                                str = "<span style='color:#FF00FF'>退换货订单</span>"
                            }else if (orderStatus == 6){
                                str = "<span style='color:#02F78E'>退款订单</span>"
                            } else {
                                str = "<span style='color:#0080FF'>已完成订单</span>"
                            }
                            return str;
                        }
                    },
                    {field:'orderPrice',title:'订单金额',width:100,align: 'center'},
                    {field:'actualPrice',title:'实付金额',width:100,align: 'center'},
                    {field:'payTime',title:'付款时间',width:100,align: 'center'},
                    {field:'shipName',title:'收货人',width:100,align: 'center'},
                    {field:'mobile',title:'收货电话',width:100,align: 'center'},
                    {field:'shipSn',title:'物流单号',width:100,align: 'center'},
                    {field:'shipChannel',title:'物流公司',width:100,align: 'center',
                        templet:function(obj){
                        //0 顺丰 1 其他  不然就是未发货，点击发货才更改状态
                            var shipChannel = obj.shipChannel;
                            var str = "";
                            if(shipChannel == 0){
                                str = "<span style='color:#02F78E'>顺丰</span>"
                            }else if (shipChannel == 1){
                                str = "<span style='color:#0080FF'>其他快递</span>"
                            } else {
                                str = "<span style='color:#0080FF'>未发货</span>"
                            }
                            return str;
                        }
                        },
                    {fixed:'right',title:'操作',width:300,align:'center',toolbar:'#tool'}
                ]
            ]

        })

        active = {
            Look:function (title,content) {
                var b = false;
                top.layer.open({
                    title:title,
                    type:2,
                    content:content,
                    area:['900px','750px'],
                    btn:['确认','取消关闭'],
                    // btn1:function (i,o) {
                    //     b = true;
                    //     o.find('iframe')[0].contentWindow.btnSubmit();
                    //     notice.success("成功");
                    // },
                    end:function (i,o) {
                        if (b) layui.table.reload('orderTable');
                    }
                })
            },
            deleteConfirm:function (ids) {
            layer.confirm('确定删除该记录？',function (index) {
                if (index>0){
                    $.ajax({
                        type:'post',
                        url:'/order/oc/delete',
                        data:{
                            id:ids
                        },
                        dataType:'json',
                        success:function (result) {
                            layer.msg(result.msg);
                            if (result.is){
                                layui.table.reload('orderTable');
                            }
                        }
                    })
                }
            });
        },
            backOrGet:function (title,content) {
                var b = false;
                top.layer.open({
                    title:title,
                    type:2,
                    content:content,
                    area:['1200px','900px'],
                    btn:['确认','关闭'],
                    btn1:function (i,o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit2();
                        notice.success("成功");
                    },
                    end:function (i,o) {
                        if (b) layui.table.reload('orderTable');
                    }
                })
            },
            goGoods:function (title,content) {
                var b = false;
                top.layer.open({
                    title:title,
                    type:2,
                    content:content,
                    area:['900px','750px'],
                    btn:['确认','取消关闭'],
                    btn1:function (i,o) {
                        b = true;
                        o.find('iframe')[0].contentWindow.btnSubmit();
                        notice.success("成功");
                    },
                    end:function (i,o) {
                        if (b) layui.table.reload('orderTable');
                    }
                })
            }
        }

        //edit
        table.on('tool(orderTable)',function (obj) {
            var event = obj.event;
            if ("look"==event){
                active.Look('详情','/page/order/orderLook/'+obj.data.id);
            } else if ('delete' == event) {
                var ids = obj.data.id;
                active.deleteConfirm(ids);
            }else if ('get' == event) {
                active.backOrGet('收款','/page/order/orderGet/'+obj.data.id);
            }else if ('go' == event) {
                active.goGoods('发货','/page/order/orderGo/'+obj.data.id);
            }else if ('back' == event) {
                active.backOrGet('退款','/page/order/orderBack/'+obj.data.id);
            }
        })

    });

</script>


</body>
</html>